// 图片自适应的JS代码：
// 图片自适应代码DrawImage V 2.3 解决图片加载过程中对视觉效果的影响.js
/**
  * 参数说明：
  *
  *	示例：

  *	<a href="#" class="imgListA">
        <img src='image.jpg' onload="javascript:DrawImage(this,300,200,5,5);" style="visibility:hidden;" />
    </a>
  * 
  设置包含图片的a标签的样式：
  a.imgListA{display:inline-block;width:300px;height:200px;}

  *	ImgD: 		要处理的图片源，使用时都是this
  *	FitWidth: 	图片要适应的宽度（含补白）
  *	FitHeight: 	图片要适应的高度（含补白）
  * paddingH: 	左右补白；
  * paddingV: 	上下补白；
  * 
  * 注意：
  * 1. 该函数的设置不能覆盖CSS样式，因此图片最好用函数的后4个参数来设置；
  * 2. 补白设置会因四舍五入造成1-2个像素的偏差，造成排版错乱，需要给包含图片的元素设置宽高来修复，宽高比FitWidth、FitHeight大1-2px；或把图片的宽高减小1-2px。
  * 3. 图片较多、较大时，加载过程中图片以原始大小显示，影响视觉效果，解决：图片设置隐藏style="visibility:hidden;" ，插件中调整完毕后再显示；
  * 4. 仅仅隐藏图片还不够，在加载完成前，不会设置图片的大小，需要在包含图片的元素中用css限制，以防止加载过程中排版错乱。2013-5-24 17:21:34
  * 
  * Date： 	2013-5 
  * By: 	LeesLee峰
  *
  * 示例：

  * <a href="#" class="imgListA">
        <img src='image.jpg' onload="javascript:DrawImage(this,300,200,5,5);" style="visibility:hidden;" />
    </a>
  * 
  */
// 图片自适应的JS代码：
function DrawImage(ImgD,FitWidth,FitHeight,paddingH,paddingV){
    var image=new Image();
    image.src=ImgD.src;
    imgWidth = FitWidth - paddingH*2;
    imgHeight = FitHeight - paddingV*2;

    if(image.width>0 && image.height>0){
        if(image.width/image.height>= imgWidth/imgHeight){
            // 图片的宽高都比原图小时，按比例放大：
            imgWidthTemp = imgWidth; 
            imgHeightTemp = imgWidth*image.height/image.width;
        }else{
            imgHeightTemp = imgHeight;
            imgWidthTemp = imgHeight*image.width/image.height;
        }
    }
    // 图片过小时，直接在上面的判断语句中设置宽高，后面设置补白则无效，用其它变量保存宽高值，修正此问题。2013-3-5 9:20:39
    ImgD.width = imgWidthTemp;
    ImgD.height = imgHeightTemp;
  
    // 框模型的机制：
    // 内部内容占满时，如果仍增加补白，会撑大整个框，而不是压缩内容。

    var paddW = parseInt((FitWidth - imgWidthTemp)/2);
    ImgD.style.paddingRight = paddW+"px";
    ImgD.style.paddingLeft  = paddW+"px";

    var paddH = parseInt((FitHeight - imgHeightTemp)/2);
    ImgD.style.paddingTop    = paddH+"px";
    ImgD.style.paddingBottom = paddH+"px";
    ImgD.style.visibility = "visible";

}

